import {
  Slider,
  SliderMark,
  SliderFilledTrack,
  Tooltip,
  SliderTrack,
  SliderThumb,
  Box,
  Text,
} from '@chakra-ui/react';
import { useState } from 'react';
import { $layerCount } from '../store';
import { useStore } from '@nanostores/react';

export default function LayerCountSlide() {
  const layerCount = useStore($layerCount);
  const [showTooltip, setShowTooltip] = useState(false);
  return (
    <Box w="full" p="2" h="16">
      <Text>生成图层数量：</Text>
      <Slider
        id="slider"
        defaultValue={8}
        min={1}
        max={50}
        onChange={(v) => $layerCount.set(v)}
        onMouseEnter={() => setShowTooltip(true)}
        onMouseLeave={() => setShowTooltip(false)}
      >
        <SliderMark value={10} mt="1" ml="-2.5" fontSize="sm">
          10
        </SliderMark>
        <SliderMark value={25} mt="1" ml="-2.5" fontSize="sm">
          25
        </SliderMark>
        <SliderMark value={40} mt="1" ml="-2.5" fontSize="sm">
          40
        </SliderMark>
        <SliderTrack>
          <SliderFilledTrack />
        </SliderTrack>
        <Tooltip
          hasArrow
          placement="top"
          isOpen={showTooltip}
          label={layerCount}
        >
          <SliderThumb />
        </Tooltip>
      </Slider>
    </Box>
  );
}
